import { computed, defineComponent, h, reactive, ref, toRefs, VNode } from 'vue'
import styles from './index.module.scss'
import * as vicon from '@vicons/ionicons5'
import { NTree, NButton, NIcon, TreeOption } from 'naive-ui'
import { useMenu } from '@/layouts/content/components/siderbar/use-menu'
import { Menu } from '@/service/modules/menu/types'
import AddMenuModal from '../../dialog/add-menu-modal'
import EditMenuModal from '../../dialog/edit-menu-modal'
import RoleGrantModal from '../../dialog/role-grant-modal'

function renderIcon(iconName: string) {
  const icon = vicon[iconName]
  return () => h(NIcon, { size: 20 }, { default: () => h(icon) })
}

const MenuManageTab = defineComponent({
  name: 'MenuManageTab',
  setup() {
    const { variables, getAllMenus, delMenu } = useMenu()
    getAllMenus()
    const menus = computed((): TreeOption[] => {
      const rootMenu: TreeOption[] = [
        {
          label: window.$t('menu.rootCatalog'),
          key: -1,
          children: [],
          prefix: renderIcon('Home'),
          suffix: () =>
            h(
              'div',
              {
                style: { paddingRight: '300px' }
              },
              createMenuBtn({
                id: -1,
                parentId: 0,
                name: '',
                icon: '',
                tabName: '',
                sort: 0,
                type: 0,
                disabled: false,
                subMenus: [],
                createTime: 0,
                updateTime: 0
              })
            )
        }
      ]
      genMenuTree(rootMenu[0], variables.allMenus)
      return rootMenu
    })
    //生成菜单树
    const genMenuTree = (parent: TreeOption, childs: Menu[]) => {
      childs?.forEach((item) => {
        const childOption: TreeOption = {
          label: item.name,
          key: item.id,
          children: [],
          prefix: renderIcon(item.icon),
          suffix: () =>
            h(
              'div',
              {
                style: { paddingRight: '300px' }
              },
              createMenuBtn(item)
            )
        }
        parent.children?.push(childOption)
        genMenuTree(childOption, item.subMenus)
      })
    }
    //创建菜单按钮
    const createMenuBtn = (item: Menu): VNode[] => {
      return [
        h(
          NButton,
          {
            size: 'small',
            style: {
              marginRight: '3px',
              visibility: item.type === 0 ? 'visible ' : 'hidden'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'success',
            title: window.$t('menu.addMenu'),
            onClick: () => {
              handleAddMenu(item.id)
            }
          },
          renderIcon('Add')
        ),
        h(
          NButton,
          {
            size: 'small',
            style: {
              marginRight: '3px',
              visibility: item.id !== -1 ? 'visible ' : 'hidden'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'warning',
            title: window.$t('menu.editMenu'),
            onClick: () => {
              handleEditMenu(item)
            }
          },
          renderIcon('Pencil')
        ),
        h(
          NButton,
          {
            size: 'small',
            style: {
              marginRight: '3px',
              visibility: item.id !== -1 ? 'visible ' : 'hidden'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'info',
            title: window.$t('menu.roleGrant'),
            onClick: () => {
              handleRoleGrant(item)
            }
          },
          renderIcon('PersonAdd')
        ),
        h(
          NButton,
          {
            size: 'small',
            style: {
              marginRight: '3px',
              visibility: item.id !== -1 ? 'visible ' : 'hidden'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'error',
            title: window.$t('menu.removeMenu'),
            onClick: () => {
              handleDelMenu(item.id)
            }
          },
          renderIcon('Remove')
        )
      ]
    }
    const defaultExpandedKeys = ref(['40', '41'])
    //操作的菜单id
    const selectedMenuIdRef = ref(0)
    //显示添加子菜单弹窗
    const showAddMenuModalRef = ref(false)
    const handleAddMenu = (menuId: number) => {
      selectedMenuIdRef.value = menuId
      showAddMenuModalRef.value = true
    }
    //显示编辑菜单弹窗
    //操作的菜单
    const selectedMenuRef = ref({})
    const showEditMenuModalRef = ref(false)
    const handleEditMenu = (menu: Menu) => {
      selectedMenuRef.value = menu
      showEditMenuModalRef.value = true
    }
    //显示角色授权弹窗
    const showRoleGrantModalRef = ref(false)
    const handleRoleGrant = (menu: Menu) => {
      selectedMenuRef.value = menu
      showRoleGrantModalRef.value = true
    }
    //显示删除菜单确认弹窗
    const handleDelMenu = (id: number) => {
      window.$dialog.warning({
        title: window.$t('dialog.warningTitle'),
        content: window.$t('menu.delMenuWarning'),
        positiveText: window.$t('dialog.positiveText'),
        negativeText: window.$t('dialog.negativeText'),
        onPositiveClick: () => {
          delMenu(id)
        }
      })
    }
    return {
      menus,
      defaultExpandedKeys,
      showAddMenuModalRef,
      selectedMenuIdRef,
      showEditMenuModalRef,
      selectedMenuRef,
      showRoleGrantModalRef,
      getAllMenus
    }
  },

  methods: {
    handleAddMenuModalShowChange() {
      this.showAddMenuModalRef = !this.showAddMenuModalRef
    },
    handleEditMenuModalShowChange() {
      this.showEditMenuModalRef = !this.showEditMenuModalRef
    },
    handleRoleGrantModalShowChange() {
      this.showRoleGrantModalRef = !this.showRoleGrantModalRef
    },
    handleRefreshTree() {
      this.getAllMenus()
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <NTree
          block-line
          data={this.menus}
          default-expanded-keys={this.defaultExpandedKeys}
          selectable={false}
        ></NTree>
        <AddMenuModal
          showModal={this.showAddMenuModalRef}
          onModalShowChange={this.handleAddMenuModalShowChange}
          onRefreshTree={this.handleRefreshTree}
          parentId={this.selectedMenuIdRef}
        ></AddMenuModal>
        <EditMenuModal
          showModal={this.showEditMenuModalRef}
          onModalShowChange={this.handleEditMenuModalShowChange}
          onRefreshTree={this.handleRefreshTree}
          menu={this.selectedMenuRef}
        ></EditMenuModal>
        <RoleGrantModal
          showModal={this.showRoleGrantModalRef}
          onModalShowChange={this.handleRoleGrantModalShowChange}
          menu={this.selectedMenuRef}
        ></RoleGrantModal>
      </div>
    )
  }
})

export default MenuManageTab
